<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
        }

        .a {
            width: 100px;
            height: 100px;
            background-color: #f00;
            /* margin-left: 30px; */
            /* margin: 0 0 0 30px; */

            /* 原本是溢出隐藏的意思   这个属性可以解决很多bug */
            overflow: hidden;
        }

        .a p {
            margin-top: 30px;
        }
    </style>
</head>

<body>

    <div class="a">
        <p>市场项目</p>
    </div>

    <!-- 
        margin  外边距
            margin-top / margin-left / margin-right / margin-bottom 
            margin:  简写
            margin:auto  不能和浮动一起用

        
        子元素的margin-top有时候会错误的传递给父元素  
        解决方案：给父元素加  overflow:hidden


        文本属性
            color 
            font-size:16px / 12px ;    中文测量高度，英文和数字差别很大
            text-align:center 
            line-height


        *  通配符 

        多个类名

        后代选择器
        
     -->

</body>

</html>